<template>
	<view class="pageBg">
		<tabListView :tabList="tabList" :tabindex="swiperCur" @tabChange="tabChange"></tabListView>
		<view class="classification">
			<view class="coat" :class="directionCur ? 'coatCur' : ''">
				<view class="box">
					<view class="item" @click="changeIfication(index)" :class="classificationCur == index ? 'itemCur' : ''" v-for="(item, index) in classificationList">{{ item.name }}</view>
				</view>
			</view>
			<view class="direction spaceAround" :class="directionCur ? 'directionCur' : ''" @click="directionCur = !directionCur">
				<image class="img" src="/static/images/navTo1.png" mode=""></image>
			</view>
		</view>
		<paginationScrolling ref="paginationScrolling" :tabList="tabList" :swiperCur="swiperCur" @tabChange="tabChange" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
			<template v-for="(item, index) in tabList" :slot="'scrollList' + index">
				<ticket :list="list" detClick></ticket>
			</template>
		</paginationScrolling>
	</view>
</template>

<script>
	import ticket from '@/components/my/ticket/ticket.vue';
	import tabListView from '@/components/my/tabListView/tabListView.vue';
	import paginationScrolling from '@/components/paginationScrolling/paginationScrolling.vue';
	import { scrollViewScroll } from '@/utils/mixins.js';
	export default {
		mixins: [scrollViewScroll],
		components: {
			ticket,
			tabListView,
		},
		data() {
			return {
				type: undefined,
				order_sn: null,
				swiperCur: 0,
				classificationList: [{ id: null, name: '全部' }],
				classificationCur: 0,
				directionCur: false,
				oldList: [],
				oldData: [],
				tabList: [
					{
						name: '全部',
						type: 'all',
						list: [],
					},
					{
						name: '平台赠票',
						type: '1',
						list: [],
					},
					{
						name: '订单 ',
						type: '0',
						list: [],
					},
				],
				initTimer: null,
			};
		},
		onLoad({ type }) {
			this.type = type;
			for (let i in this.tabList) {
				if (this.tabList[i].type === type) {
					this.swiperCur = Number(i);
				}
			}
			this.CategoryList();
			this.init();
		},
		onShow() {
			if(this.type){
				this.init();
			}
			
			// this.clear();
			// this.startInterval();
		},
		onHide() {
			this.clear();
		},
		onUnload() {
			this.clear();
		},
		
		methods: {
			startInterval() {
				this.initTimer = setInterval(() => {
					const page_size = this.list.length;
					this.page.page_size = page_size;
					this.page.page_no = 1;
					this.init(true);
				}, 1500);
			},
			clear() {
				clearInterval(this.initTimer);
				this.initTimer = null;
			},
			changeIfication(index) {
				this.reset();
				this.classificationCur = index;
				this.order_sn = this.classificationList[index].id;
				this.init();
			},
			tabChange({ item, index }) {
				this.reset();
				this.swiperCur = index;
				this.type = this.tabList[index].type;
				this.init();
			},

			tab(index) {
				this.reset();
				this.type = this.tabList[index].type;
				this.swiperCur = index;
				this.init();
			},
			async CategoryList() {
				const { data } = await this.$api.goodsCategoryList({});
				this.classificationList = [...this.classificationList, ...data];
			},

			async init(update = false) {
				this.clear();
				const { data } = await this.$api.TcketLists({
					type: this.type,
					...this.page,
					second_cate_id: this.order_sn,
				});
				this.page.count = data.count;
				this.list = [...this.list, ...data.list];
				// if (!update) {
				// 	this.list = [...this.list, ...data.list];
				// } else if (update && JSON.stringify(this.list) !== JSON.stringify(data.list)) {
				// 	this.list = data.list;
				// }
				// this.startInterval()
				
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		overflow: initial;
		min-height: auto;
		.classification {
			margin: 0 auto;
			width: 690rpx;
			position: relative;

			.coat {
				width: 650rpx;
				height: 100%;
				overflow-x: scroll;
				&::-webkit-scrollbar {
					display: none;
					width: 0 !important;
				}
			}
			.coatCur {
				overflow: hidden;
				.box {
					width: auto;
				}
			}
			.box {
				transition: width 0.5s;
				width: max-content;
				.item {
					margin-top: $submargin-width;
					margin-right: $submargin-width;
					display: inline-block;
					line-height: 40rpx;
					border: 1rpx solid #707070;
					border-radius: 23rpx;
					font-size: $uni-font-size-10;
					color: #999999;
					padding: 0 16rpx;
				}
				.itemCur {
					border: 1rpx solid $price-color;
					background-color: $price-color;
					color: $txt-color;
				}
			}
			.direction {
				width: 80rpx;
				height: 60rpx;
				background: #f5f5f5;
				position: absolute;
				right: -30rpx;
				top: 0;
				justify-content: center;
				align-items: center;
				.img {
					transform: rotate(90deg);
					transition: transform 0.5s;
					height: 30rpx;
					width: 20rpx;
				}
			}
			.directionCur {
				.img {
					transform: rotate(-90deg);
				}
			}
		}
	}
</style>
